<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>我的钱包</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/popper.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<style>
#container {
	width: 30%;
}

#head {
	font-family: '黑体';
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin-bottom: 5px;
}

#return {
	width: 20px;
}

#rechargeRecord {
	float: right;
	text-align: center;
}

#info {
	text-align: center;
	margin-top: 50px;
}

#info img {
	vertical-align: middle;
	width: 40px;
}

#info label {
	font-family: "黑体";
	font-weight: 700;
	font-size: 30px;
}

#mybalance {
	margin-top: 15px;
	font-weight: 600;
}

#action {
	text-align: center;
	margin-top: 100px;
}

#action .btn {
	width: 120px;
}

#withdraw {
	margin-top: 20px;
}

/* 弹窗样式设置 */
#rechargeModal {
	width: 300px;
	margin: auto;
	margin-top: 160px;
}
.modal-header {
	text-align: center;
}

#rechargeTitle {
	font-size: 18px;
	margin-left: 23%; 
}

.modal-body {
	text-align: center;
}

#rechargeMoney {
	border-left-style: none;
	border-right-style: none;
	border-top-style: none;
	border-bottom-style: solid 1px;
}

.modal-footer {
	justify-content: center;
}

#sureRecharge {
	margin-right: 30px;
	margin-left: 10px;
}

#cancleRecharge {
	margin-left: 30px;
}
</style>
<body>
	<div class="container" id="container">
		<p class="bg-light" id="head">我的钱包</p>
		<div>
			<a href="/home.jsp"><img id="return" src="../image/return.png" /></a>
			<a href="javascript:void(0)" id="rechargeRecord">充值记录</a>
		</div>
		<div id="info">
			<img src="../image/balance.png" />
			<div class="text-primary" id="mybalance">我的余额</div>
			<label>￥<label id="myBalance">100000</label></label>
		</div>
		<div id="action">
			<button type="button" class="btn btn-success" data-toggle="modal" data-target="#rechargeModal" id="recharge">充值</button>
			<br>
			<button type="button" class="btn" id="withdraw">提现</button>
		</div>
		
		<!-- 按钮：用于打开模态框 -->
		<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#rechargeModal">
		  打开模态框
		</button> -->

		<!-- 模态框 -->
		<div class="modal fade" id="rechargeModal">
			<div class="modal-dialog">
				<div class="modal-content">

					<!-- 模态框头部 -->
					<div class="modal-header">
						<h4 class="modal-title" id="rechargeTitle">
							请 输 入 充 值 金 额
						</h4>
					</div>

					<!-- 模态框主体 -->
					<div class="modal-body">
						<span>￥</span><input type="text" autofocus="autofocus" id="rechargeMoney">
					</div>

					<!-- 模态框底部 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal" id="sureRecharge">提交</button>
						<button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancleReCharge">取消</button>
					</div>

				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
	
	//入口函数
	$(document).ready(function(){
		getMybalance(1);
	});
	
	//获取用户余额
	function getMybalance(uid){
		$.ajax({
			url:"/userAction/findUserByUid",
			type:"get",
			data:{
				uid:uid
			},
			success:function(result){
				$("#myBalance").text(result.money);
			}
		});
	}
	
	//账户充值
	$("#sureRecharge").click(function(){
		$.ajax({
			url:"/recharge/insertRecharge",
			type:"post",
			data:{
				reid:new Date().getTime()+(Math.floor(Math.random()*90)+10),
				reprice:$("#rechargeMoney").val()
			},
			success:function(result){
				if(result.indexOf('成功') != -1){
					location.href = "/recharge/payRecharge";
				}
			}
		});
	});
</script>	
</body>
</html>
